<template>
  <el-container>
    <el-aside width="20%" class='testlists' v-if="this.testlist.length!==0" >
      <el-table :data="testlist" style="width: 100%;" height="88vh" :header-cell-style="{'text-align':'center'}"
        :cell-style="{'text-align':'center'}" show-header highlight-current-row @cell-click="changetest">
        <el-table-column prop="testName">
        </el-table-column>
      </el-table>
    </el-aside>
    <el-empty description="暂无数据" v-if='this.testlist.length===0' style="width: 100vw;margin:10%;">
      <el-button type="text" @click='gettestinfo()'><i class="el-icon-refresh-right">点击刷新</i></el-button>
    </el-empty>
    <el-empty description="暂无数据" v-if='this.testlist.length!==0&&this.testinfo.length===0' style="width: 100vw;margin:10%;">
      <el-button type="text" @click='getdata()'><i class="el-icon-refresh-right">点击刷新</i></el-button>
    </el-empty>
    <el-main class='testdatashow' v-if='this.testinfo.length!==0'>
      <div class="tableheader">
        <el-input class="tableheader-input" placeholder="请输入内容"></el-input>
        <el-button type="primary" size="mini" @click="testexport()">数据导出</el-button>
      </div>
      <el-table :data="testinfo" style="width: 100%;overflow: auto;" @scroll="scrollEvent($event)" :header-cell-style="{'text-align':'center'}"
        :cell-style="{'text-align':'center'}" height="88%">
        <el-table-column prop="instituteName" label="学院" sortable>
        </el-table-column>
        <el-table-column prop="className" label="班级" sortable>
        </el-table-column>
        <el-table-column prop="studentName" label="姓名">
        </el-table-column>
        <el-table-column prop="studentId" label="学号" sortable>
        </el-table-column>
        <el-table-column prop="score" label="分数" sortable>
        </el-table-column>
        <el-table-column prop="createTime" label="答题日期" sortable>
        </el-table-column>
      </el-table>
    </el-main>
  </el-container>
</template>

<script>
  import {base} from '../util/requests.js'
  export default {
    name: 'dataview',
    data() {
      return {
        pagenum: 0,
        testUUId: '',
        testlist: [], //试卷列表
        testinfo: [] //答题数据
      }
    },
    methods: {
      scrollEvent(e) {
      	if (e.target.scrollTop + e.target.offsetHeight >= e.target.scrollHeight) {
            this.getdata();
        }
      },
      testexport() {
        let id = this.testUUId;
        if(id != ''){
          let url = base + '/scoreInfo/export?testUUId=' + id;
          window.open(url, '_self');
        }else{
          this.$alert('暂无数据可以导出', '提示', {
            confirmButtonText: '确定'
          })
        }

      },
      changetest(row) {
        this.testUUId = row.testUuid
        this.pagenum = 0,
          this.getdata()
      },
      getdata() {
        let data = {
          'testUUId': this.testUUId,
          'pageSize': 40,
          'pageNum': this.pagenum,
        }
        this.$postRequest({
          url: '/scoreInfo/getScoreListPage',
          params: data
        }).then(res => {
          // console.log(res)
          this.testinfo=res.data
          this.pagenum++
        })

      },
      gettestinfo() {
        this.$getRequest({
            url: '/testPaper/allTest',
          }).then(res => {
            // console.log(res);
            if (res.code === 200) {
              this.testlist = res.data;
            } else {
              this.$alert(res.msg, '提示', {
                confirmButtonText: '确定'
              })
            }
          })
          .catch(failResponse => {});
      }
    },
    mounted() {
      this.gettestinfo()
    }
  }
</script>

<style>
  .testlists {
    padding-top: 0px;
    background-color: #ffffff;
    height: 88vh;
    overflow: hidden;
  }

  .testdatashow {
    background-color: #eeeeee;
    max-height: 88vh;
  }
  .tableheader{
    background-color: #ffffff;
    display: flex;
    padding: 10px;
    border-bottom: 1px solid #e2e2e2;
    border-radius: 10px 10px 0px 0px;
  }
  .tableheader-input{
    width: 40%;
    margin-left: 45%;
    margin-right: 5%;
  }
</style>
